useMemo目的是用來**「避免重複進行複雜耗時的計算」**，舉以下範例:

看似沒有問題的程式碼其實隱藏了一個問題，當修改number的值，calcSquareOfNum會印出計算後的資料，同時console會出現開始計算文字;當修改data的值時，會發現console裡面又被寫了一次開始計算，問題就在這邊，那他為什麼會這樣呢?

因為return中有{calcSquareOfNum}，所以每次的更新都會觸發render，render會直接全部重新渲染，以至於會有這樣的結果。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

import './style.css';

function App() {
  const [data, setData] = React.useState('');
  const [number, setNum] = React.useState(2);
  
  const calcSquareOfNum = calc(number)
  function calc(num){
    console.log('開始計算')
    return num*num
  }
 
  return (
    <>
      <input type="text" value={data} onChange={(e)=>setData(e.target.value)} />
      <input type="number" value={number} onChange={(e)=>setNum(e.target.value)} />
       <div>number平方為{calcSquareOfNum}</div>
    </>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));

解決辦法

useMemo可以幫我們減少這樣子不必要的資源

useMemo(函式, [相依變數])
//相依變數和useEffect很像，當變數改變才會觸發函式

把useMemo用到上面的範例，這樣在改變data值時就部會在console出現開始計算了。

const calcSquareOfNum = useMemo(()=>{return calc(number),[number]})

範例實作在這邊連結。